<template>
	<view class="dmm-make-phone-call">
		<u-action-sheet :actions="actions" :closeOnClickOverlay="true" :closeOnClickAction="true" :description="phone" :show="showCallVisible" cancelText="取消" @close="showCallVisible = false" @select="selectAction"></u-action-sheet>
		<image src="/static/imgs/icon_phone.png" mode="" @click.stop="showCallVisible = true"></image>
	</view>
	
</template>

<script>
	export default {
		name:"cl-make-call-phone",
		
		props: {
			phone: {
				type: String,
			},
		},
		
		data() {
			return {
				showCallVisible: false,
				actions: [
					{name: '呼叫'}
				]
			};
		},
		
		computed: {
		},
		
		methods: {
			selectAction: function(item) {
				uni.makePhoneCall({
					phoneNumber: this.phone
				})
			},
		}
	}
</script>

<style lang="scss">
.dmm-make-phone-call {
	height: 41rpx;
	width: 34rpx;
	image {
		height: 41rpx;
		width: 34rpx;
	}
}
	
.u-popup {
	/deep/ .u-popup__content {
		border-top-right-radius: 16rpx;
		border-top-left-radius: 16rpx;
		
		.u-action-sheet__description {
			font-size: 28rpx;
			color: $uni-text-color-muted;
		}
		.u-gap {
			height: 20rpx;
			background-color: $u-bg-color;
		}
	}
}
</style>
